<template>
  <div class="home">
    <header>
      <el-input v-model="inputVal" placeholder="请输入搜索内容" />
      <el-button type="primary" @click="search">搜索</el-button>
    </header>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="six" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="time" label="创建时间" />
      <el-table-column fixed="right" label="操作" width="130">
        <template #default="{ $index,row }">
          <el-button text size="small" @click="delect($index)">删除</el-button>
          <el-button text size="small" @click="eit(row,$index)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-form :model="form" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.six">
          <el-radio label="男" value="男" />
          <el-radio label="女" value="女" />
          <el-radio label="其他" value="其他" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="修改"
    width="600px"
  >
   <el-form :model="upform" label-width="120px">
      <el-form-item label="姓名">
        <el-input v-model="upform.name" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="upform.six">
          <el-radio label="男" value="男" />
          <el-radio label="女" value="女" />
          <el-radio label="其他" value="其他" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="upform.age" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="upBtn"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
// @ is an alias to /src
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default {
  name: "HomeView",
  setup(props) {
    const { commit, state } = useStore();
    const inputVal = ref("");
    const tableData = ref([]);
    const dialogVisible = ref(false); // 是否显示修改弹窗
    tableData.value = state.tableData;
    const form = reactive({ // 新增的表单
      name: "",
      six: "女",
      age: "",
    });
    
    const data = reactive({
      upform: {}, // 修改的对象
      upIndex: 0, // 修改的是那一条数据
    })


    const onSubmit = () => {
      commit("saveData", form);
      form.name = "";
      form.age = "";
    };
    const search = () => {
      tableData.value = state.tableData.filter((item) =>
        item.name.includes(inputVal.value)
      );
    };

    const delect = (i) => {
      // 删除的函数
      ElMessageBox.confirm(
        "确定要删除该数据吗？",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          commit('del',i);
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });
    };

    const eit = (val,i) => { // 修改的
      dialogVisible.value = true;
      data.upform = val;
      data.upIndex = i;
    }
    const upBtn = () => { // 修改的确定事件
       commit('update',{msg:data.upform,i:data.upIndex});
       dialogVisible.value = false;
    }
    return {
      inputVal,
      form,
      onSubmit,
      tableData,
      search,
      delect,
      dialogVisible,
      eit,
      ...toRefs(data),
      upBtn
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 800px;
  margin: 100px auto;
  header {
    display: flex;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
  .el-table {
    margin-top: 20px;
  }
  .el-form {
    margin-top: 20px;
  }
}
</style>
